<template>
  <div>
    <div class="none-goods-box">
      <div class="flex">
        <img :src="noneGoods" alt="" class="none-goods-pic">
        <div class="info">
          <p class="font-16 font-w">非法用户</p>
          <p>为啥要看别人的数据呢，去首页逛逛有啥好货，自己带走！</p>
          <el-button class="go-other-btn" @click="goLogin">去逛逛</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import {
    useRouter
  } from 'vue-router'
  // import {
  //   inject
  // } from 'vue'
  import noneGoods from '@/assets/images/none_goods.png'
  const router = useRouter()
  // const backgroundValue = inject('backgroundValue')
  const goLogin = () => {
    router.push('/')
  }
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;
  .none-goods-box {
    padding: 133px 0 133px 410px;

    .none-goods-pic {
      width: 274px;
      height: 382px;
      margin-right: 138px;
    }

    .info {
      padding-top: 146px;
    }

    p {
      margin: 0;
      padding: 0;

      &:first-child {
        padding: 0 0 3px 0;
      }
    }

    ::v-deep(.go-other-btn) {
      &.el-button {
        background: $darkBlue;
        color: #fff;
        border-radius: 0;
        min-height: 30px;
        border: none;
        font-size: 14px;
        padding: 0 12px;
        margin-top: 16px;
      }
    }
  }
</style>
